step1 : create empty container

                      import 'package:flutter/material.dart';

                      void main() {
                        runApp(const MyApp());
                      }

                      class MyApp extends StatelessWidget {
                            const MyApp({Key? key}) : super(key: key);

                           
                            @override
                            Widget build(BuildContext context) {
                                  //empty container
                                  //**************start****************** */
                                  return Container();
                                  //****************end**************** */
                            }
                      }

                      

return Container();

step2 : create materialApp

                      import 'package:flutter/material.dart';

                      void main() {
                        runApp(const MyApp());
                      }

                      class MyApp extends StatelessWidget {
                        const MyApp({Key? key}) : super(key: key);

                        
                        @override
                        Widget build(BuildContext context) {
                                // MaterialApp()
                                //****************start********************* */
                                return MaterialApp(
                                        title:"My First App",
                                        theme: ThemeData(
                                          primarySwatch: Colors.indigo,
                                        ),
                                        home:Container(
                                            color:Colors.white,
                                        )
                            
                                );
                                //****************end**************** */
                        }
                      }

                      

1. change Container() to MaterialApp()
2. add title
3. add theme
4. add home

Step3: new page

                      class SignInPage extends StatelessWidget {
  
                      @override
                      Widget build(BuildContext context) {
                            return Container();
                      }

                    }

                    

Same as main.dart

Step4 : link new UI with main class

                    import 'package:flutter/material.dart';

                    void main() {
                      runApp(const MyApp());
                    }

                    class MyApp extends StatelessWidget {
                      const MyApp({Key? key}) : super(key: key);

                     
                      @override
                      Widget build(BuildContext context) {
                            return MaterialApp(
                                    title:"My First App",
                                    theme: ThemeData(
                                      primarySwatch: Colors.indigo,
                                    ),
                                    // link signup page 
                                    //***********start**************** */
                                    home:SignInPage()
                                    //************end*************** */

                            );
                      }
                    }


                    class SignInPage extends StatelessWidget {

                        
                        @override
                        Widget build(BuildContext context) {
                          return Container();
                        }
                    }

                    

replace home:Container() into home:SignInPage()

Step5: add title bar to new page

                    import 'package:flutter/material.dart';

                    void main() {
                      runApp(const MyApp());
                    }

                    class MyApp extends StatelessWidget {
                      const MyApp({Key? key}) : super(key: key);

                      
                      @override
                      Widget build(BuildContext context) {
                            return MaterialApp(
                                    title:"My First App",
                                    theme: ThemeData(
                                      primarySwatch: Colors.indigo,
                                    ),
                                  home:SignInPage()

                            );
                      }
                    }


                    class SignInPage extends StatelessWidget {

                       
                        @override
                        Widget build(BuildContext context) {
                          return Scaffold(
                              // title bar 
                              //****************start********************** */
                              appBar:AppBar(
                                  title:Text('manoj')
                              )
                              //*****************end************************* */
                          );
                        }
                    }


                    

appBar:AppBar()

Step6: add shadow to the title bar

                    import 'package:flutter/material.dart';

                    void main() {
                      runApp(const MyApp());
                    }

                    class MyApp extends StatelessWidget {
                      const MyApp({Key? key}) : super(key: key);

                      
                      @override
                      Widget build(BuildContext context) {
                            return MaterialApp(
                                    title:"My First App",
                                    theme: ThemeData(
                                      primarySwatch: Colors.indigo,
                                    ),
                                  home:SignInPage()

                            );
                      }
                    }


                    class SignInPage extends StatelessWidget {

                        
                        @override
                        Widget build(BuildContext context) {
                          return Scaffold(
                              appBar:AppBar(
                                 title:Text('manoj'),

                                // add shardow
                                //************start************************ */
                                elevation: 10.10,
                                //*************end************************* */
                              )
                          );
                        }
                    }

                    

elevation: 10.10,

step 7 : add body

                    class SignInPage extends StatelessWidget {

                        
                          @override
                          Widget build(BuildContext context) {
                                return Scaffold(
                                    appBar:AppBar(
                                        title:Text('manoj'),                          
                                        elevation: 10.10,
                                      
                                    ),

                                    // body 
                                    //************************************ */

                                    Containter(
                                      child:Column(
                                          children:<Widget>[

                                          ]
                                      )
                                    )
                                    //********end*********** */


                                );
                          }
                  }


                   

                      <xmp></pre>

                      <note>
                      Containter contains a child  and children
                      </note>


                      <h3>Step 8 : add child rows

                      <pre><xmp>

                      
                    class SignInPage extends StatelessWidget {
                            
                              @override
                              Widget build(BuildContext context) {
                                        return Scaffold(
                                            appBar:AppBar(
                                              title:Text('manoj'),
                                              elevation: 10.10,
                                            ),
                                            body:Container(
                                              color:Colors.yellow,
                                              child:Column(
                                                children: <Widget>[
                                                    
                                                    //**************start******** */
                                                    Container(
                                                          color:Colors.red,
                                                          child:SizedBox(
                                                              height:100.0,
                                                              width:100.0
                                                          )
                                                    ),

                                                    Container(
                                                          color:Colors.blue,
                                                          child:SizedBox(
                                                              height:100.0,
                                                              width:100.0
                                                          )
                                                    )
                                                   //*******************end******************* */           

                                                ]
                                              )
                                            )
                                        );
                              }
                    }

                    

note Container() in side children()

Step 9 : full width

Apply crossAxisAlignment: CrossAxisAlignment.stretch,

                    
                    class SignInPage extends StatelessWidget {

                          
                          @override
                          Widget build(BuildContext context) {
                            return Scaffold(
                                appBar:AppBar(
                                  title:Text('manoj'),
                                  elevation: 10.10,
                                ),
                                body:Container(
                                  color:Colors.yellow,
                                  child:Column(
                                    // **********start**************************/
                                    crossAxisAlignment: CrossAxisAlignment.stretch,
                                    //**********************end********************* */
                                    children: <Widget>[
                                        
                                        Container(
                                          color:Colors.red,
                                          child:SizedBox(
                                            height:100.0,
                                            width:100.0
                                          )
                                        ),

                                        Container(
                                              color:Colors.blue,
                                              child:SizedBox(
                                                  height:100.0,
                                                  width:100.0
                                              )
                                        )


                                    ]
                                  )
                                )
                            );
                          }
                    }

Step10 : reusable widget

Define a widget as function()

                          Widget buildContentBox(){

                            return Container(
                                  color:Colors.yellow,
                                  child:Column(
                                  
                                        children: <Widget>[
                                            
                                            Container(
                                              color:Colors.red,
                                              child:SizedBox(
                                                height:100.0,
                                                width:100.0
                                              )
                                            ),

                                            Container(
                                                  color:Colors.blue,
                                                  child:SizedBox(
                                                      height:100.0,
                                                      width:100.0
                                                  )
                                            )


                                        ]
                                  )
                              )




                          }
                      

call widget function in body

                      return Scaffold(
                                 appBar:AppBar(
                                  title:Text('manoj'),
                                  elevation: 10.10,
                                ),
                                body:buildContentBox()
                      }          

                      

Step 11 : apply padding

padding : EdgeInsets.all(16.0),

                      Widget buildContentBox(){

                                return Container(
                                      color:Colors.yellow,
                                      //***********start************************ */
                                      padding : EdgeInsets.all(16.0),
                                      //*************end************************ */
                                      child:Column(
                                      
                                            children: <Widget>[
                                                
                                                Container(
                                                  color:Colors.red,
                                                  child:SizedBox(
                                                    height:100.0,
                                                    width:100.0
                                                  )
                                                ),

                                                Container(
                                                      color:Colors.blue,
                                                      child:SizedBox(
                                                          height:100.0,
                                                          width:100.0
                                                      )
                                                )


                                            ]
                                      )
                                  )

                      }



                    

step12: spacing between children widgets

                            SizeBox(height:20.0)
                          

Step 13 : align to center

apply mainAxisAlignment: MainAxisAlignment.center,

                      Widget buildContentBox(){

                            return Container(
                                  color:Colors.yellow,                                 
                                  padding : EdgeInsets.all(16.0),                                 
                                  child:Column(
                                        //******************start*************** */
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        //***********end******************************* */
                                        crossAxisAlignment: CrossAxisAlignment.stretch,
                                        children: <Widget>[
                                            
                                            Container(
                                              color:Colors.red,
                                              child:SizedBox(
                                                height:100.0,
                                                width:100.0
                                              )
                                            ),

                                            Container(
                                                  color:Colors.blue,
                                                  child:SizedBox(
                                                      height:100.0,
                                                      width:100.0
                                                  )
                                            )


                                        ]
                                  )
                              )

                            }
                          

step14 :add text

add text : use Text()

                          children: <Widget>[
                            Text('SignUp')
                          ]

                          

Align to center : apply textAlign:TextAlign.center

                          children: <Widget>[
                            Text('SignUp',
                                textAlign:TextAlign.center
                            )
                          ]
                          

Appy font size using style()

                          children: <Widget>[
                            Text('SignUp',
                                textAlign:TextAlign.center,
                              style:TextStyle(
                                  fontSize:32.0,
                                  fontWeight:FontWeight.w600
                              )
                            )
                          ]

                        

step 15 ; button

use RaisedButton

                        children: <Widget>[
                            Text('SignUp',
                                textAlign:TextAlign.center,
                              style:TextStyle(
                                  fontSize:32.0,
                                  fontWeight:FontWeight.w600
                              )
                            ),

                            RaisedButton(
                                  child:Text('SignUp'),
                                  onPressed: (){

                                  },
                            )
                          ]

                    

Styling button

                    children: [

                        Text('SignUp',
                            textAlign:TextAlign.center,
                          style:TextStyle(
                              fontSize:32.0,
                              fontWeight:FontWeight.w600
                          )
                        ),

                        RaisedButton(
                              child:Text('SignUp',
                                  style:TextStyle(
                                      color:Colors.indigo,
                                      fontSize:15.0
                                  ),

                              ),
                            color:Colors.white,
                            shape:RoundedRectangleBorder(
                                  borderRadius: BorderRadius.all(
                                        Radius.circular(16.0)
                                  )
                            ),
                              onPressed: (){

                              },
                        )
                      ]

                    

step 16 : reusable button widget

Create class

                    class CustomRisedButton extends StatelessWidget {
                          @override
                          Widget build(BuildContext context) {
                              return Container();
                          }
                    }
                    

move the button code to above class

                    
                    class CustomRisedButton extends StatelessWidget {
                      @override
                      Widget build(BuildContext context) {
                            return RaisedButton(
                              child:Text('SignUp',
                                style:TextStyle(
                                    color:Colors.indigo,
                                    fontSize:15.0
                                ),

                              ),
                              color:Colors.white,
                              shape:RoundedRectangleBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(16.0)
                                  )
                              ),
                              onPressed: (){

                              }
                            );
                      }
                    }
                   

                   children: <Widget>[
                          Text('SignUp',
                              textAlign:TextAlign.center,
                            style:TextStyle(
                                fontSize:32.0,
                                fontWeight:FontWeight.w600
                            )
                          ),
                          //****start************** */
                          CustomRisedButton()
                          //************* end************** */
                    ]
                  

Define parameters , constructor and usage of widget

                                            
                        class CustomRaisedButton extends StatelessWidget {
                          
                          final Widget child;
                          final Color color;
                          final double borderRadius;
                          final VoidCallback onPressed;

                          CustomRaisedButton({
                            required this.child,
                            required this.color,
                            required this.borderRadius,
                            required this.onPressed
                          });


                          @override
                          Widget build(BuildContext context) {
                            return RaisedButton(
                              child:child,
                              color:color,
                              shape:RoundedRectangleBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(borderRadius)
                                  )
                              ),
                              onPressed:onPressed
                            );
                          }
                        }

                        

                        children: <Widget>[
                            Text('SignUp',
                                textAlign:TextAlign.center,
                              style:TextStyle(
                                  fontSize:32.0,
                                  fontWeight:FontWeight.w600
                              )
                            ),
                            CustomRaisedButton(
                              child: Text(
                                'signup',

                              ),
                              color:Colors.red,
                              borderRadius:50.0,
                              onPressed : (){}
                            )
                          ]